<!--
* 缺勤统计组件
* |-- div(.dept-manage-sign-container) 总容器
*   |-- Selector 小组、学生选择器，@on-change 返回选中的学生
*   |-- div(.dept-manage-sign-content) 显示选中学生的缺勤详细统计信息
*     |-- div(.dept-manage-sign-content-record) 当选中学生没有缺勤记录时显示
*     |-- div(.dept-manage-sign-content-record) 当选中学生有缺勤记录时对缺勤记录进行遍历显示
-->
<template>
    <div class="dept-manage-sign-container">
        <Selector @on-change="getChange" />
        <div class="dept-manage-sign-content" v-if="list != undefined">
            <div class="dept-manage-sign-content-record" v-if="list.length == 0">
                没有缺勤记录哦
            </div>
            <div 
                class="dept-manage-sign-content-record" 
                v-for="(item, index) in list" 
                :key="index">
                {{item.date}} - {{item.time}} - {{parseWord(item.week)}}
            </div>
        </div>
    </div>
</template>

<script>

import Selector from "@dept/vue/selector-index"
import unsign_request from "@/axios/unsign"
import date_js from "@script/date"

export default {
    data() {
        return {
            list: undefined     // 待显示的缺勤记录
        }
    },
    methods: {
        /**
         * 当选择的学生发生变化时，向服务器发送请求获取该学生的缺勤记录
         * @param {String} v 选中学生的学号
         */
        async getChange(v) {
            let result = await unsign_request.axiosGetRecord(v, "____-__-__")
            this.list = result == null ? [] : result
        },
        /**
         * 将数字表示的星期转换为文字
         */
        parseWord(v) {
            return date_js.weekOfToday(v)
        }
    },
    components: {
        Selector
    }
}
</script>

<style lang="scss">
@import "@dept/scss/manage-sign.scss";
</style>